<template>
	<view>
		<view class="img"> 
			<van-image src="../../static/product_detail.png"></van-image>
		</view>
		<view class="title_content">
			<view class="content_type">
				<view class="type" :style="{ background: randomMonochrome[Math.floor(Math.random() * 6)]}">{{proDetail.type}}</view>
				<view class="type" :style="{ background: randomMonochrome[Math.floor(Math.random() * 6)]}">{{proDetail.desc}}</view>
			</view>
			<view class="content_title">
				帕梅拉健身
			</view>
			<view class="content_count">
				<view style="margin-left: -18px;">
					{{proDetail.content}}
				</view>
				<view style="color: #A6A6A6;">已经有{{proDetail.amount}}</view>
			</view>
			<view class="content_course">
				<text>课程更新</text>经过18年稳健发展，巅峰减重已经在全国各主要省市开设了超过50家减肥训练营基地
			</view>
			<view class="content_card">
				<view class="card_one">
					<view class="one_practice">
						<view style="width: 120px;">预计消耗<text> (千卡)</text></view>
						<view class="remark">60-98</view>
					</view>
				
				</view>
				<view class="card_one">
					<view class="one_practice practice">
						<view >
							<view style="width: 60px;">练习频次</view>
							<view class="remark" >(不限)</view>
						</view>
						<view>
							<van-image  width="39"
										height="39"
										src="../../static/icon/target_icon.png"></van-image>
						</view>
					</view>				
				</view>
				<view class="card_one card_two">
					<view class="one_practice">
						<view style="width: 80px;">准备器械</view>
						<view class="remark">(无)</view>
					</view>
				</view>
			</view>
			<View class="content_user">
				<view class="user_heared">
					<view>
						<van-image
						  round
						  width="39"
						  height="39"
						  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
						/>
					</view>
					<view class="heared_title">
						<view class="name">小鳄鱼达人</view>
						<view class="title">持续输出，运动狂魔</view>
					</view>
					<view :class="['heared_btn']" >
						{{ 1 == 2 ? '取关' : '关注' }}
					</view>
				</view>
			</View>
		</view>
		<view class="content_type">
			<view class="type_content">
				<view class="type_title">可能内容</view>
				<view class="type_count">
					<van-image src="../../static/icon/fitness_icon.png"
								width="20"
								height="20"></van-image>
					12个分段
				</view>
			</view>
			<view style="padding-bottom: 70px;">
				<MyImgList></MyImgList>
			</view>
		</view>
		<van-action-bar style="box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2);">
		  <van-action-bar-icon :icon="activeCollect.includes(proDetail.id)?'star-o':'star'" :text="activeCollect.includes(proDetail.id)?'取消':'收藏'" @click="collectPro"/>
		  <van-action-bar-icon icon="todo-list-o" text="计划" />
		  
		  <van-action-bar-button type="danger" text="开始第一次训练"  color="#000000"/>
		</van-action-bar>
	</view>
</template>

<script>
	import {randomMonochrome} from '../../utils/dataType.js';	
	import MyImgList from '../../components/imgList/imgList.vue';
	import { onMounted,ref } from 'vue';
	export default {
		components:{MyImgList},
		setup(){
			const proDetail = ref({})
			const collectList = ref([])
			const activeCollect = ref([])
			onMounted(() =>{
				if(uni.getStorageSync('activePro')){
					proDetail.value = uni.getStorageSync('activePro')
				}	
				queryActiveCollect()
			})
			
			const queryActiveCollect = () =>{
				if(uni.getStorageSync('collectList')){
					collectList.value = JSON.parse(uni.getStorageSync('collectList'))
					activeCollect.value = collectList.value.map(item =>{
						 return item.id
					})
				}
			}
			const collectPro = () =>{
				let data = collectList.value.length ? collectList.value : [];
				if(activeCollect.value.includes(proDetail.value.id)){
					data = data.filter(item =>{
						return item.id !== proDetail.value.id
					})
					uni.setStorageSync('collectList',JSON.stringify(data))
				}else{
					data.push(proDetail.value)
					uni.setStorageSync('collectList',JSON.stringify(data))				
				}		
				queryActiveCollect()
			}
			return {
				randomMonochrome,
				proDetail,
				collectPro,
				activeCollect
			}
		}
	}
</script>

<style scoped lang="scss">
	.img{
		image{
			height:360px;
			width: 100%;
		}
	}
	.content_type{
		margin-top: -15px;
		.type_content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.type_title{
				height: 40px;
				width: 143px;
				background: #2E65E9;
				margin: 18px 0 10px;
				text-align: center;
				line-height: 39px;
				font-size: 20px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
			.type_count{
				flex: 1;
				display: flex;    
				justify-content: flex-end;
				margin-right: 20px;
			}
			
		}
		
	}
	.title_content{
		height: 310px;
		padding: 0 5px;
		opacity: 1;
		border-radius: 10px;
		margin: 10px 10px;
		background: linear-gradient(180deg, rgba(212, 251, 255, 0.93) 0%, rgba(227, 250, 243, 0.52) 14.82%, rgba(235, 250, 237, 0.26) 28.28%, rgba(243, 250, 231, 0) 44.78%, rgba(227, 251, 243, 0.17) 74.23%, rgba(212, 251, 255, 0.89) 100%);
		.content_type{
			display: flex;
			
			.type{
				margin: 5px 5px;
				height: 24px;
				padding: 0 8px;
				border-radius: 15px;
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 24px;
				color: rgba(0, 0, 0, 1);
			}
		}
		.content_title{
			height: 44px;
			font-size: 36px;
			font-weight: 400;
			letter-spacing: 4px;
			line-height: 43.2px;
			color: rgba(0, 0, 0, 1);
			margin-left: 9px;
		}
		.content_count{
			display: flex;
			justify-content: space-around;	
		}
		.content_course{
			margin:8px 10px 0;
			font-size: 16px;
			font-weight: 500;
			color: #808080;
			text{
				font-size: 20px;
				font-weight: 500;
				color: #2A82E4;
			}
		}
		.content_card{
			display: flex;
			margin-top: 12px;
			font-size: 14px;
			font-weight:400;
			width: 100%;
			.card_one{
				// flex:1;
				width: 127px;
				height: 74px;
				opacity: 1;
				border-radius: 13px;
				background: linear-gradient(270deg, #DBFCFE 0%, #8AFEA8 46.56%, #DBFCFE 99.7%);			
				border: 1px solid #FFFFFF;
				margin-right: 2px;
				text{
					font-size: 12px;
				}
				.one_practice{
				    margin-top: 20px;
					margin-left: 10px;
					.remark{
						font-size: 12px;
						margin-top: 5px;
					}
				}
				.practice{
					display: flex;
				}
			}
			.card_two{
				width: 89px;
			}
		}
		.content_user{
			.user_heared{
				padding: 15px 10px 10px;
				display: flex;
				justify-content: space-between;
				.heared_title{
					margin-left: -80px;
					.name{
						font-size: 16px;
						font-weight: 700;
						letter-spacing: 0px;
						color: rgba(0, 0, 0, 1);
					}
					.title{
						font-size: 13px;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 21.84px;
						color: rgba(0, 0, 0, 1);
					}
				}
				.heared_btn{
					width: 57px;
					height: 31px;
					opacity: 1;
					border-radius: 213px;
					background: rgba(0, 0, 0, 1);
					color: rgba(255, 255, 255, 1);
					line-height: 31px;
					text-align: center;
					margin-top: 7px;
				}
				.cancel_btn{
					background: rgba(170, 170, 170, 1.0);
					color: rgba(255, 255, 255, 1);
				}
				
			}
		}
	}
</style>
